<template>
  <div class="basemaplayer-switch" :class="{'collapse':collapse2}">
    <div v-show="showLayerList" class="basemap-list">
      <div
        class="basemaplayer"
        :class="{ selected: currentMap === 'vec' }"
        @click="changeMap('vec')"
      >
        <span>地图</span>
      </div>
      <div
        class="basemaplayer"
        :class="{ selected: currentMap === 'img' }"
        @click="changeMap('img')"
      >
        <span>卫星图</span>
      </div>

    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    mainMap: {
      type: Object,
    },

  },
  data() {
    return {
      currentMap: "img", // 当前地图，img或vec
      showLayerList: true,

    };
  },
  computed: {
    ...mapState('bigScreen', [
      'collapse2'
    ])
  },
  methods: {

    switchBaseMap(mapName) {
      switch (mapName) {
        case "vec":
          this.mainMap && this.mainMap.switchMap('base-map')
          break;
        case "img":
          this.mainMap && this.mainMap.switchMap('image-map')
          break;

        default:
          break;
      }
    },
    changeMap(mapName) {
      if (!this.mainMap || mapName == this.currentMap) {
        return;
      }
      this.currentMap = mapName;
      this.switchBaseMap(mapName);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../styles/collapse";
.basemaplayer-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  right: $width + 18 + px !important;
  transition: $transition2;
  &.collapse {
    right: 18px !important;
  }
  .basemap-list {
    display: flex;
    align-items: space-between;

    .basemaplayer {
      width:80px;
      height:36px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      margin-left: 5px;
      border: 1px solid none;

      background: rgba(0, 0, 0, 0.5);
      border-radius: 4px;
      cursor: pointer;
      color: #FFFFFF;
      font-size:16px;
    }

    .selected {
      border: 1px solid #9AE7FF;
    }
  }
}
</style>
